<template>
    <div class="common-layout">
        <el-container>
            <!-- 导航栏 -->
            <el-header>
                <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" :ellipsis="false" router>
                    <el-menu-item index="/">HOME</el-menu-item>
                    <el-menu-item index="/ai">AI</el-menu-item>
                    <el-menu-item index="/404">404</el-menu-item>
                </el-menu>
            </el-header>

            <!-- 主体 -->
            <el-main>
                <RouterView />
            </el-main>
        </el-container>
    </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.el-header,
.el-main {
    margin: 0;
    padding: 0;
}

.el-main {
    height: calc(100vh - 60px);
    overflow: hidden;
    position: relative;
}

.common-layout {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    /* 固定页面 */
    position: fixed;
}
</style>